<template>
  <div v-loading="pageLoading" element-loading-text="数据正在读取中，请稍候！" element-loading-spinner="el-icon-loading" class="analysis-container">
    <el-form ref="formSearch" :model="q" :rules="formSearchRules" :inline="true" class="search-box">
      <el-form-item label="分类数">
        <el-input-number v-model="q.categories" placeholder="请输入分类数" :min="1" :max="5" controls-position="right"></el-input-number>
      </el-form-item>
      <el-form-item label="单米选取">
        <el-select v-model="q.meterVal" placeholder="单米选取">
          <el-option v-for="item in deepList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width: 80px;" :disabled="!q.meterVal" @click="getSingleData">确定</el-button>
        <!-- <el-button type="default" icon="el-icon-refresh" @click="resetSearch">重置</el-button>
        <el-button type="primary" icon="el-icon-sold-out" style="width: 120px;" @click="load">导入数据文件</el-button>
        <el-button type="primary" icon="el-icon-sell" style="width: 120px;" @click="load">导出数据文件</el-button> -->
      </el-form-item>
    </el-form>
    <div class="main-box">
      <div class="main-body">
        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100%" border>
          <el-table-column prop="data1" label="深度" align="center">
          </el-table-column>
          <el-table-column prop="data2" label="Pe" align="center">
          </el-table-column>
          <el-table-column prop="data3" label="密度" align="center">
          </el-table-column>
          <el-table-column prop="data4" label="分类" align="center">
          </el-table-column>
        </el-table>
      </div>
      <div class="main-right">
        <div class="result-box">
          <div class="result-item">
            <div id="echarts1" class="echarts-box" style="width: 100%;" />
            <div id="echarts2" class="echarts-box" style="width: 100%;" />
            <div id="echarts3" class="echarts-box" style="width: 100%;" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import echarts from 'echarts'
import { transTableData, transChart1 } from '@/utils'
import { getCookieValue, setCookieValue } from '@/utils/utils'
import { getPageOneOp } from "@/api/analysis";

let timer02;
export default {
  name: 'Data',
  components: {
  },
  data() {
    return {
      pageLoading: false,
      filter: {
        wellNum: '1',
        topDepth: undefined,
        bottomDepth: undefined
      },
      q: {
        categories: 5,
        meterVal: undefined
      },
      deepList: [],
      chart1: null,
      chart2: null,
      chart3: null,
      tableData: [],
      formSearchRules: {
        categories: [
          { required: true, message: '请输入分类数', trigger: ['blur'] }
        ],
        meterVal: [
          { required: true, message: '请选择单米区间', trigger: ['change'] }
        ]
      }
    }
  },
  computed: {
  },
  created() { },
  beforeDestroy() {
    clearTimeout(timer02);
  },
  activated() {
  },
  mounted() {
    this.$nextTick(() => {
      this.getCookieVal();
    });
    window.addEventListener("resize", this.resizeTheChart);
  },
  methods: {
    getCookieVal() {
      this.filter.topDepth = Number(getCookieValue('topDepth'));
      this.filter.bottomDepth = Number(getCookieValue('bottomDepth'));
      this.q.meterVal = Number(getCookieValue('meterVal'));
      if (this.filter.topDepth && this.filter.bottomDepth && this.q.meterVal) {
        const optList = [];
        const lowEnd = Math.floor(Number(this.filter.topDepth)); // 向下取整
        const highEnd = Math.floor(Number(this.filter.bottomDepth)); // 向上取整
        for (var i = lowEnd; i < highEnd; i++) {
          optList.push({
            label: `${i}米~${i + 1}米`,
            value: i
          });
        }
        this.deepList = optList;
        this.getSingleData();
      }
    },
    getSingleData() { // 更改当前操作对应的单个米数
      this.$refs['formSearch'].validate((valid) => {
        if (valid) {
          this.pageLoading = true;
          const q = {
            user: 'anyone',
            opType: 5,
            meter: [this.q.meterVal, this.q.meterVal + 1]
          }
          setCookieValue('meterVal', this.q.meterVal);
          console.log(q);
          getPageOneOp(q).then(res => {
            this.pageLoading = false;
            if (res && res.message) {
              this.getList(7); // 已完成调用获取切片数据
            } else {
              // timer02 = setTimeout(() => {
              //   this.getSingleData(); // 未完成继续轮询
              // }, 3000);
              this.$confirm(res.description, '提示', {
                confirmButtonText: '重试',
                cancelButtonText: '关闭',
                type: 'warning'
              }).then(() => {
                this.getSingleData(); // 未完成继续轮询
              }).catch(() => { });
            }
          }).catch((error) => {
            console.log(error);
            this.pageLoading = false;
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    getList(opType) {
      this.tableLoading = true;
      const q = {
        user: 'anyone',
        opType
      };
      if (opType === 7) {
        q.categories = this.q.categories;
      }
      // console.log(q);
      getPageOneOp(q).then(res => {
        if (res && res.message) {
          if (opType === 7) {
            const data = res.data;
            this.tableData = transTableData(data); // 处理表格数据
            console.log(transChart1(data));
            this.initChart1(transChart1(data)); // 处理图表一数据
            this.initChart2(transChart1(data)); // 处理图表二数据
            this.initChart3(transChart1(data)); // 处理图表三数据
          }
          this.tableLoading = false;
        }
      }).catch((error) => {
        console.log(error);
        this.tableLoading = false;
      });
    },
    initChart1(data) {
      const seriesData = Object.keys(data).map(key => {
        return {
          name: key,
          type: 'scatter',
          data: data[key]
        };
      });
      this.chart1 = echarts.init(document.getElementById("echarts1"))
      this.chart1.setOption({
        // color: [
        //   '#000000', // 黑色  
        //   '#FF0000', // 红色  
        //   '#00FF00', // 绿色  
        //   '#0000FF', // 蓝色  
        //   '#FF00FF', // 品红色  
        //   '#00FFFF', // 青色  
        //   '#C0C0C0', // 银灰色  
        //   '#FFFF00', // 黄色  
        //   '#800080' // 紫色  
        // ],
        grid: {
          left: '3%',
          right: '10%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {
          // trigger: 'axis',
          position: [10, 10],
          showDelay: 0,
          formatter: function (params) {
            if (params.value.length > 1) {
              return '分类:' + params.seriesName + '<br/>' +
                'Pe:' + params.value[0] + '<br/>' +
                ' 密度:' + params.value[1];
            } else {
              return '分类:' + params.seriesName + ' :<br/>' +
                params.name + ' : ' +
                params.value;
            }
          }
        },
        toolbox: {
          show: false
        },
        brush: {
        },
        legend: {
          data: Object.keys(data),
          left: 'center'
        },
        xAxis: [
          {
            name: 'Pe',
            type: 'value',
            scale: true,
            axisLabel: {
              formatter: '{value}'
            },
            splitLine: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            name: '密度',
            type: 'value',
            scale: true,
            axisLabel: {
              formatter: '{value}'
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: seriesData
      })
    },
    initChart2(data) {
      const seriesData = Object.keys(data).map(key => {
        return data[key].length;
      });
      this.chart2 = echarts.init(document.getElementById("echarts2"))
      this.chart2.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: Object.keys(data),
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '数量',
            type: 'bar',
            barWidth: '40%',
            data: seriesData
          }
        ]
      })
    },
    initChart3(data) {
      const seriesData = Object.keys(data).map(key => {
        return {
          value: data[key].length,
          name: key
        };
      });
      this.chart3 = echarts.init(document.getElementById("echarts3"))
      this.chart3.setOption({
        title: {
          text: '',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          top: '30%',
          right: '3%',
          data: Object.keys(data)
        },
        series: [
          {
            name: '饼图',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: seriesData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    },
    resizeTheChart() {
      if (this.chart1 && this.chart2 && this.chart3) {
        this.chart1.resize();
        this.chart2.resize();
        this.chart3.resize();
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.analysis-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 50px);
  padding: 10px;
  display: flex;
  flex-direction: column;
}
.search-box {
  padding: 10px 10px 0;
  background-color: #fff;
  .el-form-item {
    margin-bottom: 10px;
  }
}
.main-box {
  flex: 1;
  margin-top: 10px;
  overflow: hidden;
  display: flex;
  .main-body {
    background-color: #fff;
    width: 40%;
    display: flex;
    padding: 10px;
    .main-body-flex {
      position: relative;
      display: flex;
      flex: 1;
    }
    .kedu {
      position: absolute;
      left: 0;
      right: 0;
      border: 1px dashed rgba(4, 255, 0, 0.3);
    }
    ::v-deep {
      .el-table {
        overflow: auto;
      }
    }
  }
  .main-right {
    flex: 1;
    width: 0;
    margin-left: 10px;
    background-color: #fff;
    padding: 10px;
    display: flex;
    flex-direction: column;
  }
}
.scale-box {
  margin-top: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  border-left: 2px solid #000;
  line-height: 1;
  .scale-tit {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 12px;
    display: flex;
    align-items: flex-start;
    border-top: 1px solid #000;
    padding-left: 2px;
    padding-top: 2px;
    min-width: 29px;
  }
  span {
    flex: 1;
    display: flex;
    align-items: flex-end;
    font-size: 12px;
    border-bottom: 1px solid #000;
    padding-left: 2px;
    min-width: 29px;
  }
}
.result-box {
  display: flex;
  flex: 1;
  .result-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .echarts-box {
      flex: 1;
    }
  }
}
.right-form {
  .el-form-item {
    margin-bottom: 10px;
  }
  .el-divider--horizontal {
    margin-top: 20px;
    margin-bottom: 10px;
  }
}
</style>
